<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
    <form>
        姓名<input v-model="name">您输入的姓名是：{{name}}
        <br/>
        性别<input type="radio" value="男" v-model="sex">
        <input type="radio" value="女" v-model="sex">
        您的性别是：{{sex}}
        <br>
        爱好<input type="checkbox" value="篮球" v-model="aihao">篮球
        <input type="checkbox" value="足球" v-model="aihao">足球
        <input type="checkbox" value="看电影" v-model="aihao">看电影
        您的爱好是{{aihao}}
        <br/>
        去哪里旅游<select v-model="lvyoudi">
        <option>济南</option>
        <option>北京</option>
        <option>济南</option>
    </select>
        您要去[{{lvyoudi}}]旅游
        <br/>
        简介<p style="white-space: pre;">{{jianjie}}</p>
        <textarea v-model="jianjie"></textarea>
        <br/>
        多文本框
        <br>
        <input type="text" value="" @blur="getDd(0, $event)">
        <input type="text" value="" @blur="getDd(1, $event)">
        <input type="text" value="" @blur="getDd(2, $event)">
        <br>
        <button @click="getDd">获取多文本</button>
    </form>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: '',
            sex: '',
            aihao: [],
            lvyoudi: [],
            jianjie: '',
            dtext:[]
        },
        methods:{
            getDd:function (i, e) {
                this.dtext[i] = e.target.value;
                console.log(this.dtext);
            }
        }
    })
</script>
</body>
</html>
